<template>
  <div class="common-wrap">
    <QueryForm
      ref="conditionForm"
      module="customer"
      :searchBtnLoading="loading"
      v-model:searchForm="searchForm"
      v-model:search-column="searchColumn"
      @handle-search="onSearch"
    />
    <div class="common-box">
      <el-row style="height: 40px" class="con-button-rows">
        <ButtonGroup
          :disabledDelete="multipleSelection.length === 0"
          :hasPermiAdd="['common:customer:add']"
          :hasPermiDelete="['common:customer:delete']"
          :buttonType="['add', 'delete']"
          @add="onAdd"
          @delete="onDelete"
        >
          <el-button
            :disabled="multipleSelection.length === 0 || checkType"
            v-hasPermi="['common:customer:check']"
            icon="check"
            :title="$t('提交')"
            @click="onCheck"
          ></el-button>
        </ButtonGroup>
      </el-row>
      <MyTable
        tableId="customer"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pageVo="pageVo"
        ref="commonTable"
        moduleName="customer"
        @handleSelectionChange="handleSelectionChange"
        @handle-page-change="handlePageChange"
      ></MyTable>
    </div>
    <Audit
      v-if="auditVisible"
      v-model:visible="auditVisible"
      :currRow="currRow"
      @onSubmit="onSearch"
    />
    <FollowUp
      v-if="followUpVisible"
      v-model:visible="followUpVisible"
      :currRow="currRow"
      @onSubmit="onSearch"
    >
    </FollowUp>
  </div>
</template>

<script setup lang='tsx'>
import { ref, reactive, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import * as api from "@/api/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { hasPermi } from "@/utils/mUtils.js";
import { useRouter } from "vue-router";
import FollowUp from "./components/followUp.vue";
import Audit from "./components/audit.vue";
import {
  queryFormColumnFilters,
  getSubZhEn,
  characterSegmentation,
} from "@/utils/mUtils.js";
let { t } = useI18n();
const router = useRouter();
defineOptions({
  name: "Customer",
});
const pageVo = reactive({
  pageSize: 50,
  total: 10,
  currentPage: 1,
  status: true,
});
const loading = ref(true);
const dataSource = ref([]);
const columns = ref([
  {
    type: "checkbox",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    field: "customerCode",
    title: "客户编码",
    slots: {
      default: ({ row }) => {
        return [
          <div class="flex-table-center-between">
            <el-button
              type="primary"
              disabled={!hasPermi(["common:customer:edit"])}
              link
              onClick={() => {
                onEdit(row);
              }}
            >
              {row.customerCode || ""}
            </el-button>
            <span
              onClick={() => {
                onFollowUp(row);
              }}
              style="color: #e6a23c;
               border-color: #e6a23c;"
              title={t("跟进")}
              v-show={row.cusStatus === 0 && hasPermi(["common:customer:user"])}
              class="release-application-goods"
            >
              {t("跟")}
            </span>
            <span
              onClick={() => {
                onAudit(row);
              }}
              title={t("审核")}
              v-show={
                row.cusStatus === 2 && hasPermi(["common:customer:audit"])
              }
              class="release-application-goods"
            >
              {t("审")}
            </span>
          </div>,
        ];
      },
    },
    width: "auto",
  },
  {
    field: "customerNameZh",
    title: "客户名称(中文)",
    width: "160",
  },
  {
    field: "customerNameEn",
    title: "客户名称(英文)",
  },
  {
    field: "customerAbbr",
    title: "客户简称",
  },
  {
    field: "unifiedSocialCreditCode",
    title: "社会统一信用代码",
  },
  {
    field: "companySizeName",
    title: "企业规模",
  },
  {
    field: "provinceCityArea",
    title: "国家/省/市/区",
    formatter: ({ row }) => {
      return characterSegmentation(row, [
        "countryName",
        "provinceName",
        "cityName",
        "areaName",
      ]);
    },
  },
  {
    field: "cusStatus",
    title: "客户状态",
    formatter: ({ cellValue }) => {
      const obj = {
        0: "潜在",
        1: "开发中",
        2: "审批中",
        3: "生效",
        4: "黑名单",
        5: "休眠",
        6: "公海",
      };
      return obj[cellValue] || "";
    },
  },
  {
    field: "customerBusinessAddress",
    title: "经营地址",
  },
  {
    field: "auditStatus",
    title: "审核状态",
    formatter: ({ cellValue }) => {
      const obj = {
        0: "未审核",
        1: "审核通过",
        2: "审核驳回",
      };
      return obj[cellValue] || "";
    },
  },
  {
    field: "oceanEmployee",
    title: "海运业务员",
  },
  {
    field: "oceanCustomerService",
    title: "海运客服",
  },
  {
    field: "airEmployee",
    title: "空运业务员",
  },
  {
    field: "airCustomerService",
    title: "空运客服",
  },
  {
    field: "overseaEmployee",
    title: "海外仓业务员",
  },
  {
    field: "overseaCustomerService",
    title: "海外仓客服",
  },
  {
    field: "customerTypeName",
    title: "客户类型",
  },
  {
    field: "latestOrderDate",
    title: "最近一次下单时间",
  },
  {
    field: "createTime",
    title: "创建时间",
    width: 150,
  },
]);
const searchForm = ref({});
const searchColumn = ref([
  {
    type: "label_input",
    label: "客户编码",
    prop: "customerCode",
  },
  {
    type: "label_input",
    label: "客户名称",
    prop: "customerNameZh",
  },
]);
const multipleSelection = ref([]);
const auditVisible = ref(false);
const followUpVisible = ref(false);
const currRow = ref({});
onMounted(() => {
  onSearch();
});
const checkType = computed(() => {
  const arr = multipleSelection.value.filter((item) => item.cusStatus !== 1);
  return arr.length;
});
const list = () => {
  loading.value = true;
  api.default.common.customers
    .list({
      ...searchForm.value,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    })
    .then((res) => {
      dataSource.value = res.rows;
      loading.value = false;
      pageVo.total = res.total;
    })
    .catch(() => {
      loading.value = false;
    });
};
const onDelete = () => {
  const ids = multipleSelection.value.map((item) => item.id);
  ElMessageBox.confirm(t("是否确定删除当前选择数据？"), t("提示"), {
    confirmButtonText: t("确定"),
    cancelButtonText: t("取消"),
    type: "warning",
  })
    .then(() => {
      api.default.common.customers.remove(ids).then(() => {
        ElMessage.success(t("删除成功"));
        onSearch();
      });
    })
    .catch(() => {});
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
const handlePageChange = (val) => {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  list();
};
const onSearch = () => {
  pageVo.currentPage = 1;
  list();
};
const onAdd = () => {
  router.push({
    path: "/common/cus/customerAdd",
    query: {
      title: "客户新增",
    },
  });
};
const onEdit = (row) => {
  router.push({
    path: "/common/cus/customerAdd",
    query: {
      title: "客户修改",
      id: row.id,
      detailed: row.customerCode,
    },
  });
};
const onAudit = (row) => {
  auditVisible.value = true;
  currRow.value = { ...row };
};
const onCheck = () => {
  const ids = multipleSelection.value.map((item) => item.id);
  api.default.common.customers.submit(ids).then(() => {
    ElMessage.success(t("提交成功"));
    onSearch();
  });
};
const onFollowUp = (row) => {
  followUpVisible.value = true;
  currRow.value = { ...row };
};
</script>

<style lang="scss" scoped>
.common-wrap {
  height: 100%;
  width: 100%;
  background: #fff;
}
</style>